<!--
 * @Author: ray ray.chin@163.com
 * @Date: 2024-06-10 15:09:22
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-14 10:09:23
 * @FilePath: /app-template-uni-upgrade/src/components/ray-form/ray-form-schema.vue
 * @Description: 动态表单方式一
 * Copyright (c) 2024 by ray, All Rights Reserved.
-->
<template>
    <uni-forms ref="form" v-model="formData">
        <template v-for="(item, index) in formSchema">
            <uni-forms-item
                :required="item.required"
                :name="item.name"
                :label="item.label"
                :key="`formSchema${index}`"
                :rules="item.rules"
                :style="{ display: ['textarea', 'file'].includes(item.component) ? 'block' : '' }"
            >
                <!-- input单行文本 -->
                <uni-easyinput
                    v-if="item.component == 'input'"
                    trim="both"
                    v-model="formData[item.name]"
                    :placeholder="item.placeholder"
                    @input="inputChange"
                    :disabled="item.readonly"
                >
                </uni-easyinput>
                <!-- textarea多行文本，官方默认为140 -->
                <view v-if="item.component == 'textarea'"
                    class="form-textarea-container"
                >
                    <uni-easyinput
                        trim="both"
                        type="textarea"
                        v-model="formData[item.name]"
                        :placeholder="item.placeholder"
                        :maxlength="item.maxlength"
                        @input="inputChange"
                        :disabled="item.readonly"
                    >
                    </uni-easyinput>
                    <view
                        class="form-text-area-count"
                    >
                        {{ formData[item.name] ? formData[item.name].length : 0 }}/{{ item.maxlength ? item.maxlength : 140 }}
                    </view>
                </view>

                <!-- checkbox多选 -->
                <uni-data-checkbox
                    v-if="item.component == 'checkbox'"
                    :multiple="item.multiple"
                    v-model="formData[item.name]"
                    :localdata="item.options"
                    :disabled="item.readonly"
                >
                </uni-data-checkbox>

                <!-- file附件 -->
                <ray-pick-files
                    v-if="item.component == 'file'"
                    v-model="formData[item.name]"
                    :readonly="item.readonly"
                >
                </ray-pick-files>
            </uni-forms-item>
        </template>
    </uni-forms>
</template>
<script>
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import rayPickFiles from '@/components/ray-pick-files/ray-pick-files.vue';
export default {
    name: 'ray-form-schema',
    components: {
        uniEasyinput,
        uniForms,
        rayPickFiles,
    },
    props: {
        formData: {
            type: Object,
            default: () => ({})
        },
        formSchema: {
            type: Array,
            default: () => ([])
        },
    },
    model: {
        // 指定 v-model 要绑定的参数叫什么名字，来自于 props 中定义的参数
		prop: 'formData',
        // 指定要触发的事件名字，将被用于 $emit
		event: 'change',
	},
	computed: {
		getValue: {
			// 这里的计算属性使用了 getter、setter，可以简化代码
			// 可参见链接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter
			get() {
				return this.formData
			},
			set(val) {
                // 触发
				this.$emit('change', val)
			},
		},
	},
    data() {
        return {
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        inputChange(val) {
            console.warn('inputChange', val);
        },

        async validate() {
            return await this.$refs.form.validate();
            // this.$refs.form.validate().then(res => {
            //     console.log('表单数据信息：', res);
            // }).catch(err => {
            //     console.log('表单错误信息：', err);
            // });
        },
    },
}
</script>
<style lang="scss" scoped>
.form-container {
    background-color: #ffffff;
    align-items: center;
    font-size: 28rpx;
    color: #666666;
    padding: 20rpx 10rpx;
    border-bottom: 1rpx solid #f5f5f5;
    width: 100%;
}

.form-textarea-container {
    border: 1rpx solid #f5f5f5;
    width: 100%;
    padding: 5rpx 5rpx 30rpx 5rpx;
    position: relative;
    .form-text-area-count {
        position: absolute;
        width: 100%;
        bottom: 0;
        padding-right: 25rpx;
        z-index: 21;
        text-align: right;
        color: #999;
    }
}

/deep/ .uni-forms-item {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 22px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    /* border-bottom: 2rpx solid #f5f5f5; */
}

/deep/ .is-input-border {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border: 0px solid #dcdfe6;
    border-radius: 0px;
}

/deep/ .uni-easyinput__placeholder-class {
    color: #999;
    font-size: 28rpx;
}
</style>